<template>
	<view class="content">
		<view class="top">
		        <view class="good">早上好！张先生</view>
		        <view class="right">
		            <img src="@/static/icon/bell.png" style="width: 40rpx; height: 40rpx;" />
		            <view class="pos">66</view>
		        </view>
		</view>
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<template v-for="(item,index) in swiperList" :key="index" >
					<swiper-item>
						<view class="swiper-item">
							<image src="@/static/images/093604.png" mode="widthFix" style="width: 100%;"></image>
						</view>
					</swiper-item>
				</template>
			</swiper>
		</view>
		<view class="top_icon">
			<template v-for=" (item , index) in iconList1" :key="index">
				<view class="icon_item">
					<image :src="item.path" mode="" style="width: 45rpx;height: 45rpx;"></image>
					<view class="icon_name">
						{{item.name}}
					</view>
				</view>
			</template>
		</view>
		<view class="menu">
			<template v-for="(item,ind) in menu" :key="ind">
				<view class="menu_item" @click="shows(ind)">
					<view class="item_s" v-if="item.hasChild">
						<template v-for="(it,id) in item.child" :key="id">
							<image :src="it.smallImg"  style="width: 45rpx;height: 45rpx;" lazy-load></image>
						</template>
					</view>
					<view class="item_s" v-else>
						<image :src="item.bigImg" mode="widthFix" style="width: 90rpx;" lazy-load></image>
					</view>
					<view class="menu_name">
						{{item.name}}
					</view>
				</view>
			</template>
		</view>
	
		<view class="bottom">
			<template v-for="(item , index) in tabar" :key="index"> 
			<!-- {{item.path}} -->
				<view class="tabar" :class="index==1 || index==2? 'sub' : ''">
					
					<image :src="item.path" style="width: 44rpx;height: 44rpx;" mode="widthFix" lazy-load></image>
					<view class="">
						{{item.name}}
					</view>
				</view>
			</template>
			<view class="used">
				<!-- <view class="used1mg"> -->
					<view class="cicrle">
						+
					</view>
					<view class="">
						常用
					</view>
				<!-- </view> -->
				
			</view>
		</view>
		<view class="fix" v-if="show">
			<view class="fix fixed" @click="this.show=false">
			</view>
			<view class="pop_content">
				<view class="p_top">
					{{title}}
				</view>
				<view class="menu2">
					<view class="item2" v-for="(item,idx) in selectList" :key="idx">
						<image :src="item.bigImg" mode="widthFix" style="width: 100rpx;" lazy-load></image>
						<view class="" style="color: #000;">
							{{item.name}}
						</view>
					</view>
					
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				show:false,
				index:0,
				swiperList: [
					{
						path:'@/static/images/093604.png',
					},
					{
						path:'@/static/images/093604.png',
					},
					{
						path:'@/static/images/093604.png',
					},
					{
						path:'@/static/images/093604.png',
					}
				],
				iconList1:[
					{
						path:'../../static/icon/icon1.png',
						name:'功能1'
					},{
						path:'../../static/icon/icon1.png',
						name:'功能2'
					},{
						path:'../../static/icon/icon1.png',
						name:'功能3'
					},{
						path:'../../static/icon/icon1.png',
						name:'功能4'
					},{
						path:'../../static/icon/icon1.png',
						name:'功能5'
					}
				],
				menu: [
					{
						bigImg:'',
						smallImg:'',
						name:'功能A',
						hasChild: true,
						child:[
							{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能2',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能13',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能14',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能15',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能16',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能17',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能18',
							},
							{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},
						]
					},
					{
						bigImg:'',
						smallImg:'',
						name:'功能A',
						hasChild: true,
						child:[
							{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},
						]
					},
					{
						bigImg:'',
						smallImg:'',
						name:'功能A',
						hasChild: true,
						child:[
							{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},{
								bigImg:'../../static/images/select1.png',
								smallImg:'../../static/icon/small1.png',
								name:'功能1',
							},
						]
					},
					{
						bigImg:'',
						smallImg:'',
						name:'功能A',
						hasChild: true,
						child:[
							{
								bigImg:'',
								smallImg:'../../static/icon/small1.png',
								name:'',
							},{
								bigImg:'',
								smallImg:'../../static/icon/small2.png',
								name:'',
							},{
								bigImg:'',
								smallImg:'../../static/icon/small3.png',
								name:'',
							},{
								bigImg:'',
								smallImg:'../../static/icon/small4.png',
								name:'',
							},{
								bigImg:'',
								smallImg:'../../static/icon/small1.png',
								name:'',
							},{
								bigImg:'',
								smallImg:'../../static/icon/small1.png',
								name:'',
							},
						]
					},
					{
						bigImg:'../../static/icon/big1.png',
						smallImg:'',
						name:'功能A',
						hasChild: false,
					},
					{
						bigImg:'../../static/icon/big1.png',
						smallImg:'',
						name:'功能A',
						hasChild: false,
					},
					{
						bigImg:'../../static/icon/big1.png',
						smallImg:'',
						name:'功能A',
						hasChild: false,
					},
					{
						bigImg:'../../static/icon/big1.png',
						smallImg:'',
						name:'功能A',
						hasChild: false,
					},
					{
						bigImg:'../../static/icon/big1.png',
						smallImg:'',
						name:'功能A',
						hasChild: false,
					},
				],
				tabar:[
					{
						path:'../../static/tabar/index.png',
						name:'工作',
						isCircle:false
					},
					{
						path:'../../static/tabar/index2.png',
						name:'助手',
						isCircle:false
					},
					{
						path:'../../static/tabar/index3.png',
						name:'分析',
						isCircle:false
					},
					{
						path:'../../static/tabar/mine.png',
						name:'我',
						isCircle:false
					},
				],
				selectList:[
					{
						bigImg:'',
						smallImg:'',
						name:''
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			shows(index){
				console.log(index)
				if(!this.menu[index].hasChild){
					uni.showToast({
						icon:'none',
						title:'点击了'+menu[index].name
					})
				}else{
					this.index=index
					this.title=this.menu[index].name
					this.selectList=this.menu[index].child
					console.log(this.selectList)
					// debugger
					this.show=true
				}
			}
		}
	}
</script>

<style>
	.content {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

    .top {
		
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        background-color: #272a3b;
    }

    .good {
        /* flex: 3; */
        width: 90%;
        font-size: 32rpx;
		font-weight: 600;
        text-align: center;
        color: #71ad06;
    }

    .right{
        width: 10%;
        /* height: 40rpx; */
        display: flex;
        align-items: center;
        /* flex: 1.25; */
        clear: both;
        /* position: relative; */
    }
    .pos {
        height: 40rpx;
        width: 40rpx;
        line-height: 40rpx;
        text-align: center;
        background-color: #fe0100;
        color: #fff;
        position: relative;
        top: -8px;
        left: -10px;
        border-radius: 50%;
        /* right: ; */
        font-size: .12rem;
    }

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.swiper{
		width: 100%;
	}
	.top_icon{
		/* padding: 10rpx 0; */
		height: 120rpx;
		width: 100%;
		display: flex;
		color: #7f8183;
		align-items: center;
		justify-content: space-around;
		background-color: #272a3b;
	}
	.icon_item{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.icon_name{
		height: 40rpx;
		line-height: 40rpx;
		margin-top: 10rpx;
	}
	.menu{
		margin-top: 20rpx;
		width: 100%;
		background-color: #fff;
		/* min-height: 800rpx; */
		display: flex;
		flex-direction: row;
		align-items: center;
		/* justify-content: center; */
		flex-wrap: wrap;
	}
	.menu_item{
		width: 24.3%;
		height: 170rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		justify-content: space-evenly;
		border: 1rpx solid #f8f8f8;
	}
	.item_s{
		width: 90rpx;
		height: 90rpx;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
	}
	.bottom{
		/* width: 100%; */
		height: 150rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		border-top: 1rpx solid #9e9e9e;
	}
	.tabar{
		width: 150rpx;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.sub{
		width: 250rpx;
	}
	.used{
		width: 130rpx;
		height: 200rpx;
		border-radius: 50%;
		border-top: 1rpx solid #9e9e9e;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		position: fixed;
		left: 41%;
		bottom: 0rpx;
	}
	.cicrle{
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 80rpx;
		text-align: center;
		background-color: #88bf01;
		border-radius: 50%;
		color: #fff;
	}
	.fix{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.fixed{
		background-color: #000;
		opacity: .4;
		z-index: 990;
	}
	.pop_content{
		width: 720rpx;
		height: 600rpx;
		background-color: #fff;
		border-radius: 10rpx;
		z-index: 999;
		opacity: 1;
	}
	.p_top{
		height: 80rpx;
		width: 100%;
		line-height: 80rpx;
		text-align: center;
		background-color: #272a3b;
		color: #fff;
	}

	.menu2{
		padding-top: 20rpx;
		width: 700rpx;
		margin: 0 auto;
		/* border: 1rpx solid #999; */
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	.item2{
		width: 170rpx;
		height: 170rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	






</style>
